import 'package:flutter/material.dart';
import 'package:flutter_base/config/app_color.dart';
import 'package:flutter_base/pages/test_detail/model/model_test_detail.dart';
import 'package:flutter_base/pages/test_detail/widgets/test_card_base.dart';
import 'package:flutter_base/generated/assets.dart';
import 'package:flutter_base/widgets/image/auto_image.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class TestMultiDimensionalAnalysisCard extends StatelessWidget {
  final ModelTestDetail? testDetail;

  const TestMultiDimensionalAnalysisCard({Key? key, this.testDetail}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TestCardBase(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题
          Text(
            'Multi-dimensional analysis',
            style: TextStyle(
              fontSize: 16.sp,
              fontWeight: FontWeight.w600,
              color: AppColor.color0C0A09,
              letterSpacing: 0.14,
              height: 1.26,
            ),
          ),

          SizedBox(height: 4.w),

          // 描述
          Text(
            'Comprehensively evaluate your performance and development potential in each dimension',
            style: TextStyle(
              fontSize: 12.sp,
              color: AppColor.color7F909E,
              height: 1.26,
              letterSpacing: 0.12,
            ),
          ),

          SizedBox(height: 30.w),

          // 多维度进度条列表
          _buildDimensionsList(),
        ],
      ),
    );
  }

  // 多维度进度条列表
  Widget _buildDimensionsList() {
    // 各维度数据
    final dimensionsData = [
      {
        'name': 'Leadership',
        'score': 88,
        'trend': 'up',
        'color': Color(0xFF13B2A3), // 青色
      },
      {
        'name': 'Role Perception',
        'score': 72,
        'trend': 'down',
        'color': Color(0xFFE9BD4C), // 黄色
      },
      {
        'name': 'Values',
        'score': 92,
        'trend': 'up',
        'color': Color(0xFFCAAA66), // 金色
      },
      {
        'name': 'Positiveness',
        'score': 82,
        'trend': 'up',
        'color': Color(0xFF8DC226), // 绿色
      },
      {
        'name': 'Emotional Management',
        'score': 65,
        'trend': 'down',
        'color': Color(0xFFF452F4), // 粉色
      },
    ];

    return Column(
      children: dimensionsData.asMap().entries.map((entry) {
        final index = entry.key;
        final dimension = entry.value;
        final isLast = index == dimensionsData.length - 1;
        
        return Padding(
          padding: EdgeInsets.only(bottom: isLast ? 0 : 24.w), // 最后一项不需要底部间距
          child: _buildDimensionItem(
            name: dimension['name'] as String,
            score: dimension['score'] as int,
            trend: dimension['trend'] as String,
            color: dimension['color'] as Color,
          ),
        );
      }).toList(),
    );
  }

  // 单个维度项
  Widget _buildDimensionItem({
    required String name,
    required int score,
    required String trend,
    required Color color,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 维度名称和分数
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              name,
              style: TextStyle(
                fontSize: 14.sp,
                fontWeight: FontWeight.w500,
                color: AppColor.color0C0A09,
              ),
            ),
            
            _buildTrendIcon(trend, color),
          ],
        ),
        
        SizedBox(height: 10.w),
        
        // 进度条
        _buildProgressBar(score, color),
      ],
    );
  }

  // 趋势图标
  Widget _buildTrendIcon(String trend, Color color) {
    final isUp = trend == 'up';
    
    return Stack(
      alignment: Alignment.center,
      children: [
        // 创建自定义的三角形箭头
        CustomPaint(
          size: Size(18.w, 18.w),
          painter: TrendArrowPainter(
            isUp: isUp,
            color: isUp ? Color(0xFF8DC226) : Color(0xFFFF4444),
          ),
        ),
      ],
    );
  }

  // 进度条
  Widget _buildProgressBar(int score, Color color) {
    final double percent = score / 100;
    
    return Container(
      width: double.infinity,
      child: Column(
        children: [
          // 进度条
          LayoutBuilder(
            builder: (context, constraints) {
              return Stack(
                children: [
                  // 背景进度条
                  Container(
                    height: 16.w,
                    width: constraints.maxWidth,
                    decoration: BoxDecoration(
                      color: Color(0xFFF5F5F5),
                      borderRadius: BorderRadius.circular(8.w),
                    ),
                  ),

                  
                  // 前景进度条
                  Container(
                    height: 16.w,
                    width: constraints.maxWidth * percent,
                    decoration: BoxDecoration(
                      color: color,
                      borderRadius: BorderRadius.circular(8.w),
                    ),
                  ),
                ],
              );
            }
          ),
          
          // 进度条下方的刻度
          SizedBox(height: 6.w),
          
          // 刻度标记
          _buildScoreMarkers(),
        ],
      ),
    );
  }
  
  // 构建单个进度条下方的刻度标记
  Widget _buildScoreMarkers() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 2.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [0,20,40,60,80,100].map((item) {
          return Column(
            children: [
              Container(
                width: 1,
                height: 10.w,
                color: AppColor.colorDFE5F1,
              ),

              Text(
                item.toString(),
                style: TextStyle(
                  fontSize: 12.sp,
                  color: AppColor.color8C92A3,
                  fontWeight: FontWeight.w400,
                ),
              )
            ],
          );
        }).toList()
      ),
    );
  }
}

// 自定义箭头绘制
class TrendArrowPainter extends CustomPainter {
  final bool isUp;
  final Color color;

  TrendArrowPainter({required this.isUp, required this.color});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;

    final path = Path();
    
    if (isUp) {
      // 向上箭头
      path.moveTo(size.width / 2, 0);
      path.lineTo(size.width, size.height * 0.6);
      path.lineTo(0, size.height * 0.6);
      path.close();
    } else {
      // 向下箭头
      path.moveTo(size.width / 2, size.height);
      path.lineTo(size.width, size.height * 0.4);
      path.lineTo(0, size.height * 0.4);
      path.close();
    }

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
} 